<template>
    <div class="login">
            <div class="box">
                    <div class="topbox">
                        <h1>美容美发管理系统</h1>
                    </div>
                    <div class="bottombox">
                            <Form class="form" ref="formCustom"  style="width:300px" :model="formCustom" :rules="ruleCustom" :label-width="100">
                                        <Form-item label-position="right" label="用户名" prop="userName">
                                            <Input type="text" v-model="formCustom.userName"></Input>
                                        </Form-item>
                                        <Form-item label="密码" prop="password" >
                                            <Input type="password" v-model="formCustom.password"></Input>
                                        </Form-item>
                                        <Form-item>
                                            <Button type="primary" @click="handleSubmit('formCustom')">登录</Button>
                                            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
                                        </Form-item>
                            </Form>
                    </div>
            </div>
    </div>
</template>
// <script>
export default{
    name:"login",
     data () {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                }
            };
            return {
                formCustom: {
                    // 用户名
                    userName: '',
                    // 密码
                    password: '',
                },
                // 验证规则
                ruleCustom: {
                    userName: [
                        {required:true , message:"请输入用户名" , trigger:'blur'},
                        {min:5 , max:20 , message:"用户名在5-20位中间！" , trigger:'blur'}

                    ],
                    password: [
                       {required:true , message:"请输入密码" , trigger:'blur'},
                        {min:5 , max:20 , message:"密码在5-20位中间！" , trigger:'blur'}
                    ],
                   
                }
            }
        },
        // 验证通过后向后端发送请求
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                   
                    // if(this.formCustom.userName == userName && this.formCustom.password == password){
                    //     this.$router.push(home)
                    // }
                    if (valid) {
                        this.$axios({
                            method : "post",
                            url:"user/login",
                            // data:this.formCustom,
                            data:{'userName':this.formCustom.userName,'password':this.formCustom.password},
                        //回调函数
                        }).then(res=>{
                            if(res.data.code===200){
                                console.log(res.data.code);
                                 //会话存储
                                 sessionStorage.setItem("user",JSON.stringify(res.data))
                                 this.$router.push("/home");
                            }else{
                                this.$Message.error('用户名或者密码错误！');
                                return;
                            }
                            //this.$router.push("/home");
                        })

                        
                        
                    }
                })
            },
            // 重置输入框
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
   
}
</script>
<style scoped>
.login{
  background: url("../assets/login.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed; 
   
}
.box{
    /* position: absolute; */
    width: 500px;
    height: 400px;
    /* border: 1px solid forestgreen; */
    margin: 0 auto;
    margin-top: 250px;
}
.topbox{
     /* border: 1px solid forestgreen; */
     height: 150px;
     width: 100%;
}
.topbox h1{
    line-height: 150px;
    text-align: center;
}
.bottombox{
    position: relative;
    /* border: 1px solid red;  */
    height: 250px;
    width: 100%;
}
.form{
    position: absolute;
    line-height: 250px;
    text-align: center;
    left: 60px;
    /* top: 50px; */
}
</style>